<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link href="./css/global.css" rel="stylesheet"/>
    <style>

        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .header {
            padding: 10px 0 10px 0;
            border: 1px solid black;
            display: flex;
        }

        .content {
            flex: 1;
            display: flex; /*设置为flex布局*/
        }

        .content > .depart {
            border: 1px solid black;
            width: 200px;
        }

        .header-1 {
            /*border: 1px solid black;*/
            flex: 1;
            display: flex; /*设置为flex布局*/
            /*justify-content: center; !*水平居中*!*/
            align-items: center; /*垂直居中*/
        }

        .header-1 label {
            flex: 1;
            margin-left: 70px;
        }

        .header-1 > a {
            margin: 0 6px 0 6px;
        }

        input {
            height: 22px;
            padding-left: 10px;
            outline: none;
            border: 1px solid #999;
        }

        .depart {
            display: flex; /*设置为flex布局*/
            flex-direction: column;
            /*justify-content: center; !*水平居中*!*/
            align-items: center; /*垂直居中*/
            /*width: 200px;*/


        }

        .depart > li {
            margin: 7px 0 7px 0;
        }

        .depart > li > a:active {
            color: red;
        }

        .list {
            flex: 1;
            /*display: flex; !*设置为flex布局*!*/
            /*justify-content: center; !*水平居中*!*/
            /*align-items: center; !*垂直居中*!*/

        }

        table {
            margin: 20px 100px 0 100px;
            width: 600px;
        }

        td {
            text-align: center;
        }

        .before {
            color: chocolate
        }

        .active {
            color: lawngreen;
        }

        .depart a:hover {
            color: red;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <form class="header-1" action="userList">
            <label>
                <span>姓名/账号:</span>
                <input type='text' name='username'>
            </label>
            <label><input type="button" value="查询" id="query" style="padding: 0"></label>
        </form>
        <div class="header-1">
            <a href="toDetail" id="add">新增</a>
            <a href="userLogout">注销</a>
        </div>
    </div>
    <div class="content">
        <ul class="depart">
        </ul>
        <div class="list">
            <table class="table" border="1" cellspacing="0" cellpadding="60px">

            </table>
        </div>
    </div>
</div>
<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

    $(function(){
        userList()
        departList()
    });

    // $(".depart").click(function () {
        // $(this).removeClass('before');
        // $(this).addClass('active');
        // alert($(this).html())
    // })

    $('#query').click(function () {
        var username = $("input[name='username']").val();
        let data = {"username":username}
        userList(data)
    })

    $('.content').on('click', 'li', function(e) {
        let departName = $(this).text();
        let data = {"bmmc":departName}
        userList(data)
    });

    function departList(data) {
        $.ajax({
            type: 'GET',
            url: "/jsp_demo/departList",
            data: data,
            success: function (res) {
                var list = eval(res);
                var liStr = ""
                for (let i = 0; i < list.length; i++) {
                    liStr +=
                    "<li class='before' ><a href='#'>"+list[i].bmmc+"</a></li>"
                }
                $(".depart").append(liStr);
            },
            dataType: "text"
        });
    }

    function userList(data) {
        $.ajax({
            type: 'GET',
            url: "/jsp_demo/userList",
            data: data,
            success: function (res) {
                var list = eval(res);


                var tdStr = "<tr>\n" +
                    "                    <th>姓名</th>\n" +
                    "                    <th>账号</th>\n" +
                    "                    <th>部门</th>\n" +
                    "                    <th>性别</th>\n" +
                    "                    <th colspan='3'>操作</th>\n" +
                    "                </tr>"
                for (let i = 0; i < list.length; i++) {
                    tdStr +=
                        " <tr>\n" +
                        "                        <td>"+list[i].yhxm+"</td>\n" +
                        "                        <td>"+list[i].yhid+"</td>\n" +
                        "                        <td>"+list[i].depart+"</td>\n" +
                        "                        <td>"+list[i].sex+"</td>\n" +
                        "                        <td><a href='userDetail?YHID="+list[i].yhid+"&type=0'>查看</a></td>\n" +
                        "                        <td>\n" +
                        "                                <a class='delete'   href='userDelete?YHID="+list[i].yhid+"'>删除</a>\n" +
                        "                        </td>\n" +
                        "                        <td>\n" +
                        "                                <a href='userDetail?YHID="+list[i].yhid+"&update=1'>修改</a>\n" +
                        "                        </td>\n" +
                        "                    </tr>"
                }
                $("table").html('')
                $("table").append(tdStr);
            },
            dataType: "text"
        });
    }


</script>
</body>
</html>
